<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .box{
                width: 400px;
                height: 400px;
                border: 1px solid white;
                transition: 2s;
            }

            .box1{
                float: left;
                margin-left: 100px;
                margin-top: 100px;

            }
            .box2{
                float: left;
                margin-left: 10px;
                margin-top: 100px;

            }
            .box1 div{
                width: 100px;
                height: 100px;
                border: 1px solid black;
                margin-bottom: 10px;
                background: -webkit-linear-gradient(left,#73041b,#e33b36);

            }
            .box1 div:nth-child(1){
                border-radius: 14px 145px;
            }
            .box1 div:nth-child(2){
                border-radius: 145px 14px;
            }
            .box2 div{
                width: 100px;
                height: 100px;
                border: 1px solid black;
                margin-bottom: 10px;
                background: -webkit-linear-gradient(left,#870e4f,#c2202f);

            }
            .box2 div:nth-child(1){
                border-radius: 145px 14px;
            }
            .box2 div:nth-child(2){
                border-radius: 14px 145px;
            }
            .box:hover {
                transform: rotate(720deg);
            }
        </style>
    </head>
    <body>

        <div class="box">
            <div class="box1">
                <div></div>
                <div></div>
            </div>
            <div class="box2">
                <div></div>
                <div></div>
            </div>
        </div>
    </body>
</html>